// 导入角色列表数据

import Table, { type ColumnsType } from "antd/es/table";
import { useState } from "react";
import type { Role_Old } from "#/entity";
import { BasicStatus } from "#/enum";
import { Icon } from "@/components/icon";
import { Badge } from "@/ui/badge";
import { Button } from "@/ui/button";
import { Card, CardContent, CardHeader } from "@/ui/card";
import { RoleModal, type RoleModalProps } from "./role-modal";

// 初始化角色数据 - 使用中国古典诗词风格的描述
const ROLES: Role_Old[] = [
	{
		id: "1",
		name: "超级管理员",
		code: "admin",
		status: BasicStatus.ENABLE,
		order: 1,
		desc: "拥有系统所有权限，如君王统御江山，一统天下",
		permission: [],
	},
	{
		id: "2",
		name: "系统管理员",
		code: "system",
		status: BasicStatus.ENABLE,
		order: 2,
		desc: "负责系统管理，如宰相治理朝政，安邦定国",
		permission: [],
	},
	{
		id: "3",
		name: "用户管理员",
		code: "user_admin",
		status: BasicStatus.ENABLE,
		order: 3,
		desc: "管理用户信息，如伯乐识良马，知人善用",
		permission: [],
	},
	{
		id: "4",
		name: "普通用户",
		code: "user",
		status: BasicStatus.ENABLE,
		order: 4,
		desc: "系统基础用户，如百姓安居乐业，和谐共处",
		permission: [],
	},
	{
		id: "5",
		name: "访客用户",
		code: "guest",
		status: BasicStatus.DISABLE,
		order: 5,
		desc: "临时访问权限，如过客匆匆，踏雪无痕",
		permission: [],
	},
];

// 默认角色值
const DEFAULT_ROLE_VALUE: Role_Old = {
	id: "",
	name: "",
	code: "",
	status: BasicStatus.ENABLE,
	permission: [],
};
export default function RolePage() {
	const [roleModalPros, setRoleModalProps] = useState<RoleModalProps>({
		formValue: { ...DEFAULT_ROLE_VALUE },
		title: "新建",
		show: false,
		onOk: () => {
			setRoleModalProps((prev) => ({ ...prev, show: false }));
		},
		onCancel: () => {
			setRoleModalProps((prev) => ({ ...prev, show: false }));
		},
	});
	const columns: ColumnsType<Role_Old> = [
		{
			title: "角色名称",
			dataIndex: "name",
			width: 300,
		},
		{
			title: "角色编码",
			dataIndex: "code",
		},
		{ title: "排序", dataIndex: "order", width: 60 },
		{
			title: "状态",
			dataIndex: "status",
			align: "center",
			width: 120,
			render: (status) => (
				<Badge variant={status === BasicStatus.DISABLE ? "error" : "success"}>
					{status === BasicStatus.DISABLE ? "禁用" : "启用"}
				</Badge>
			),
		},
		{ title: "描述", dataIndex: "desc" },
		{
			title: "操作",
			key: "operation",
			align: "center",
			width: 100,
			render: (_, record) => (
				<div className="flex w-full justify-center text-gray">
					<Button variant="ghost" size="icon" onClick={() => onEdit(record)} title="编辑">
						<Icon icon="solar:pen-bold-duotone" size={18} />
					</Button>
					<Button variant="ghost" size="icon" title="删除">
						<Icon icon="mingcute:delete-2-fill" size={18} className="text-error!" />
					</Button>
				</div>
			),
		},
	];

	const onCreate = () => {
		setRoleModalProps((prev) => ({
			...prev,
			show: true,
			title: "新建角色",
			formValue: {
				...prev.formValue,
				...DEFAULT_ROLE_VALUE,
			},
		}));
	};

	const onEdit = (formValue: Role_Old) => {
		setRoleModalProps((prev) => ({
			...prev,
			show: true,
			title: "编辑角色",
			formValue,
		}));
	};

	return (
		<Card>
			<CardHeader>
				<div className="flex items-center justify-between">
					<div>角色列表</div>
					<Button onClick={onCreate}>新建</Button>
				</div>
			</CardHeader>
			<CardContent>
				<Table
					rowKey="id"
					size="small"
					scroll={{ x: "max-content" }}
					pagination={false}
					columns={columns}
					dataSource={ROLES}
				/>
			</CardContent>
			<RoleModal {...roleModalPros} />
		</Card>
	);
}
